<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<style>
table,th,td {
	border: 1px solid black;
	padding-left: 5px;
	border-collapse: collapse;
	color: rgb(0, 51, 102);
	vertical-align: middle;
	font-family: Times;
}

.lightRowBG {
	background-color: rgb(253, 254, 255);
}

.darkRowBG td {
	background-color: rgb(221, 235, 247);
}

.headerRowBG th {
	background-color: rgb(91, 155, 213);
	color: white;
}

div {
	padding: 5px;
	height: 100px;
	width: 150px;
}
</style>
<script>
	/*
	$.ajax({
		type : "GET",
		url : "http://localhost:8080/bseIndia/stockSharePrice/500295",
		aSync : false,
		success : function(xml) {
			alert("xml - 1.3" + xml);
			var str = "<tr>"
			str = str + "<td>"
					+ $(xml).find("#appbar>div>div[1]>div>span")[0].text()
					+ "</td>";
			str = str + "</tr>";
			alert("str - 1.2" + str);
			$('#tbl-1').html(str);
		}
	});
	 */

	function Ctrl($scope, $http) {
		$scope.stocks = {};
		var fromServer = angular.toJson("");
		$scope.stocks = angular.fromJson(fromServer);
		$scope.stocks.sortBy = "";

		$scope.retriveAllStocks = function() {
			$http({
				method : 'GET',
				url : 'http://localhost:8080/bseIndia/getAllStocks',
				cache : false
			}).success(function(data) {
				fromServer = angular.toJson(data);
				$scope.stocks = angular.fromJson(fromServer);
				$scope.stocks.objectList.sort(compare);
			});
		}

		$scope.sortStocks = function(sortByStr) {
			$scope.stocks.sortBy = sortByStr;
			$scope.stocks.objectList.sort(stocksCompare);
		}

		$scope.stocksCompare = function(a, b) {
			if ($scope.stocks.sortBy="scripCode" && a.scripCode < b.scripCode)
				return -1;
			else if ($scope.stocks.sortBy="scripCode" && a.scripCode > b.scripCode)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="scripName" && a.scripName < b.scripName)
				return -1;
			else if ($scope.stocks.sortBy="scripName" && a.scripName > b.scripName)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="curValue" && a.curValue < b.curValue)
				return -1;
			else if ($scope.stocks.sortBy="curValue" && a.curValue > b.curValue)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="chgValue" && a.chgValue < b.chgValue)
				return -1;
			else if ($scope.stocks.sortBy="chgValue" && a.chgValue > b.chgValue)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="chgPer" && a.chgPer < b.chgPer)
				return -1;
			else if ($scope.stocks.sortBy="chgPer" && a.chgPer > b.chgPer)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="industry" && a.industry < b.industry)
				return -1;
			else if ($scope.stocks.sortBy="industry" && a.industry > b.industry)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="bseGroup" && a.bseGroup < b.bseGroup)
				return -1;
			else if ($scope.stocks.sortBy="bseGroup" && a.bseGroup > b.bseGroup)
				return 1;
			else
				return 0;
			
			if ($scope.stocks.sortBy="faceValue" && a.faceValue < b.faceValue)
				return -1;
			else if ($scope.stocks.sortBy="faceValue" && a.faceValue > b.faceValue)
				return 1;
			else
				return 0;
		}
	}
</script>
</head>
<body ng:controller="Ctrl">
	<input type="text" name="ScripBox" id="ScripBox" value="500295" />
	<button value="Click Me" ng-click="retriveAllStocks()">Click
		Me</button>
	<table id="TblWishList" class="wishList">
		<thead>
			<tr title="headerRow" class="headerRowBG">
				<th ng-click="sortStocks('scripCode')">Scrip Code</th>
				<th ng-click="sortStocks('scripName')">Scrip ID</th>
				<th ng-click="sortStocks('curValue')">LTP</th>
				<th ng-click="sortStocks('chgValue')">Chg Value</th>
				<th ng-click="sortStocks('chgPer')">Chg %</th>
				<th ng-click="sortStocks('industry')">Industry</th>
				<th ng-click="sortStocks('bseGroup')">Group</th>
				<th ng-click="sortStocks('faceValue')">Face value</th>
			</tr>
		</thead>
		<tbody>
			<tr ng:repeat="stock in stocks.objectList"
				ng-class-odd="'lightRowBG'" ng-class-even="'darkRowBG'">
				<td>{{stock.scripCode}}</td>
				<td>{{stock.scripName}}</td>
				<td>{{stock.curValue}}</td>
				<td>{{stock.chgValue}}</td>
				<td>{{stock.chgPer}}</td>
				<td>{{stock.industry}}</td>
				<td>{{stock.bseGroup}}</td>
				<td>{{stock.faceValue}}</td>
			</tr>
		</tbody>
	</table>
</body>
</html>